//生产总览组件(测试阶段)
import React, { Component } from "react";
import { connect } from "dva";
import { List, Tabs, WhiteSpace, NavBar, Icon, Card } from "antd-mobile";
import { StickyContainer, Sticky } from "react-sticky";
import style from "./ToShow.less";
import "antd-mobile/dist/antd-mobile.css";
import {soilRestorationDataModel,theTotalQuantity,getTime} from '../../services/cockpit';
import moment from 'moment';
import Circle from './Circle';

import MyRadar from "./myChart/myRadar";
import MyBarL from "./myChart/myBarL";
import MyLineL from "./myChart/myLineL";

import MyBarC from './myChart/myBarC';
import MySurface from './myChart/mySurface';

import MyBarR from "./myChart/myBarR";
import MyPie from "./myChart/myPie";
import MyLineR from "./myChart/myLineR";

// import MyTable from './myTable/myTable';

const more = require('../../assets/iconFont/more.png');
const chart = require('../../assets/iconFont/chart.png');
const clock = require('../../assets/iconFont/clock.png');
const flame = require('../../assets/iconFont/flame.png');
const farmland = require('../../assets/iconFont/farmland.png');
const repair = require('../../assets/iconFont/repair.png');
const safe = require('../../assets/iconFont/safe.png');
const molecule = require('../../assets/iconFont/molecule.png');
//列表套件
const Item = List.Item;
const Brief = Item.Brief;
const tabs = [{ title: "运行数据" }, { title: "安环数据" }];
import ddonfig from '../../ddconfig';
// ddonfig.setTitle('对外展示')
const boxL = [
    // {
    //     icon:chart,
    //     name:'环保排放指标统计数据',
    //     module:<MyRadar />
    // },
     {
        icon:safe,
        name:'运行安全实时监控',
        module:<MyPie />
    },
    {
        icon:clock,
        name:'环保排放指标实时数据',
        module:<MyBarL />
    },
    {
        icon:flame,
        name:'能源消耗量统计',
        module:<MyLineL />
    },
];
const boxR = [
    {
        icon:repair,
        name:'土壤日修复量',
        module:<MyLineR />
    },
    // {
    //     icon:safe,
    //     name:'运行安全实时监控',
    //     module:<MyPie />
    // },
    {
        icon:molecule,
        name:'土壤修复前后重点污染组分含量对标',
        module:<MyBarR />
    },
    {
        icon:flame,
        name:'能源消耗量统计',
        module:<MyLineL />
    },
];

let circleData = [
   
    {
        now: 10,
        max: 85,
        title: '【项目工期】',
        sum:'',
        unit:'',
    },
    {
        now: 10,
        max: 58,
        title: '【总工程量】',
        sum:'',
        unit:'',
    },
    {
        now: 100,
        max: 100,
        title: '【土壤一次处理合格率】',
        sum:'',
        unit:'',
    },
    {
        now: 100,
        max: 100,
        title: '【环保排放达标率】',
        sum:'',
        unit:'',
    },
    ];

let tableData = {
    title:['污染物种类','浓度（mg/kg）','修复目标（mg/kg）'],
    data:[
        {name:'苯并(a)芘',span1:'',span2:''},
        {name:'二苯并（a,h）蒽',span1:'',span2:''},
        {name:'α-六六六',span1:'',span2:''},
        {name:'β-六六六',span1:'',span2:''},
        {name:'三氯乙烯',span1:'',span2:''},
        {name:'六氯苯',span1:'',span2:''},
    ]
};
let tableData2 = {
    title:['数据类型','回转窑温度','停留时间'],
    data:[
        {name:'最佳工艺组合(模型)',span1:'430℃',span2:'42分钟'},
        {name:'实时数据',span1:'412℃',span2:'39分钟'},
    ]
};

let videoList = {
    videoL:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
        {videoName:'项目现场三',url:''},
    ],
    videoC:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
    ],
    videoR:[
        {videoName:'项目现场一',url:''},
        {videoName:'项目现场二',url:''},
        {videoName:'项目现场三',url:''},
    ],
};

class ToShow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            time: Date.now(),
            viewType:true,
            waterContent:'0',
            waterContentType:true,
            show: true,
            show1:false,
            mian1:'',
            mian2:''
        };
    }

    componentDidMount() {
        this.timeId = setInterval(() => {
            this.setState({
                time: Date.now(),
            })
        }, 1000);

        theTotalQuantity().then(data =>{
            let max = data.data.ret.gross;
            let now = data.data.ret.sum;
            circleData[1].max = max;
            circleData[1].now = now;
            circleData[1].sum = max;
            circleData[1].unit = 'm³';
        });
        getTime().then(data =>{
            let max = data.data.ret.atPresent;
            let now = data.data.ret.theNumberOfDays;
          
            circleData[0].max = max;
            circleData[0].now = now;
            circleData[0].sum = max;
            circleData[0].unit = '天';
        });

        soilRestorationDataModel().then(data =>{
            let name = data.data.ret.name;
            let amounts = data.data.ret.amounts;
            let target = data.data.ret.target;
            for(let i = 0; i < 6; i++){
                tableData.data[i].name = name[i];
                tableData.data[i].span1 = amounts[i];
                tableData.data[i].span2 = target[i];
            }
        })
    }
    componentWillUnmount() {
        clearTimeout(this.timeId)
    }
    //input框 土壤含水量的值
    setWaterContent = () =>{
        this.setState({
            waterContentType:false
        });
    };
    changeWaterContent=(e)=>{
        this.setState({
            waterContent:e.target.value,
        });
    };
    getWaterContent = (e) => {
        this.setState({
            waterContent:e.target.value,
            waterContentType:true
        });
    };
    //返回系统
    getStyem = () => {
        this.props.history.push("/controlSubject/ReportingSystem")
    }
    //图片点击事件
    goStytem = (index) => {
        console.log(index)
        if(index.name == '环保排放指标统计数据' || index.name == '环保排放指标实时数据'){
            this.props.history.push("/controlSubject/EnvironmentalHistory")
        }
        if(index.name == '能源消耗量统计') {
            this.props.history.push("/controlSubject/CheckingSystem")
        }
        if(index.name == '运行安全实时监控') {
            this.props.history.push("/controlSubject/AlarmManagement")
        }
        if(index.name == '土壤修复前后重点污染组分含量对标') {
            let data = {text:'土壤修复指标汇总表'};
            let path = {
            pathname:'/controlSubject/ReportingSystem',
            state:data,
            }
            this.props.history.push(path)
        }
    }
    //切换视图
    boxBtn = () =>{
        let noeView = !this.state.viewType;
        this.setState({
            viewType: noeView,
        })
    };
    //更多
    anMore = () => {

   
   
            this.setState({
                show: !this.state.show,
            });

              setTimeout(() => {
                    this.setState({
                        show1: !this.state.show1,
                    })
              },500)

    }
    anMore1 = () => {

   
   
        this.setState({
            show1: !this.state.show1,
        });

          setTimeout(() => {
                this.setState({
                    show: !this.state.show,
                })
          },500)

}
    render() {
        return (
            <div>
                <div className={style.wrap}>
                    <div className={style.typearea}>
                        <StickyContainer
                         tabBarUnderlineStyle={{color:'red'}}
                         tabBarBackgroundColor="red"
                        >
                        <div>
                            <div className={style.diskBox}>
                                {
                                    circleData.map((index,key)=>{
                                        return(
                                            <div className={style.diskCircle} key={String(key)}>
                                                <Circle data={index}/>
                                                <i className={style.diskLine} ></i>
                                                <div className={style.circleName}>{index.title}<span style={{color:'#fff'}}>{index.sum}</span>{index.unit}</div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        
                    </div>
                            <Tabs
                                tabs={tabs}
                                initalPage={"t2"}
                               className={style.TabsB}
                            >
                                <div
                                    style={{
                                        display: "flex",
                                        height: "1000px",
                                        backgroundColor: "#fff",
                                  
                                    }}
                                >
                    <div className={`${style.boxBig} ${style.boxR}`}>
                        {this.state.viewType?
                            boxR.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            <i><img className={style.iconImg} src={index.icon}/></i>
                                            {index.name}
                                            {/* <i><img className={style.moreImg} src={more} onClick={this.goStytem.bind(this,index)}/></i> */}
                                        </div>
                                        {index.module}
                                    </div>
                                )
                            }):
                            videoList.videoR.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            {index.videoName}
                                        </div>
                                        <div className={style.videoBoxSmall}>
                                            {index.url}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                                 
                                </div>
                                <div
                                    style={{
                                        display: "flex",
                                        height: "1000px",
                                        backgroundColor: "#fff"
                                    }}
                                >
                                                    <div className={`${style.boxBig} ${style.boxL}`}>
                        {this.state.viewType?
                            boxL.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            <i><img className={style.iconImg} src={index.icon}/></i>
                                            {index.name}
                                            <i><img className={style.moreImg} src={more} onClick={this.goStytem.bind(this,index)}/></i>
                                        </div>
                                        {index.module}
                                    </div>
                                )
                            }):
                            videoList.videoR.map((index,key)=>{
                                return(
                                    <div className={style.boxSmall} key={String(key)}>
                                        <div className={style.boxTitle}>
                                            {index.videoName}
                                        </div>
                                        <div className={style.videoBoxSmall}>
                                            {index.url}
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                                 
                             
                                    <div />
                                </div>
                            </Tabs>
                        </StickyContainer>
                    </div>
                </div>
            </div>
        );
    }
}
function mapStateToProps(state) {
    return {};
}
export default connect()(ToShow);
